<template>
  <div class="zf-input">
    <input
      :type="type"
      :value="value"
      @input="change"
      :placeholder="placeholder"
    />
  </div>
</template>
<script>
export default {
  name: "zf-input",
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
    value: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {};
  },
  methods: {
    change(e) {
      this.$emit("input", e.target.value);
      this.$dispatch("zf-form-item", "validate");
    },
  },
};
</script>
<style>
</style>